<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试详情 - 教师端</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <script src="/js/echarts.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --light: #f8f9fa;
            --dark: #343a40;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            padding: 2rem 0;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .page-title {
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .page-subtitle {
            color: #6c757d;
            margin-bottom: 0;
        }

        /* 统计卡片 */
        .stats-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            border-left: 4px solid var(--primary);
        }

        .stats-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1rem;
        }

        .stats-number {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }

        /* 图表卡片 */
        .chart-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            overflow: hidden;
        }

        .chart-header {
            background: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

        .chart-header i {
            margin-right: 10px;
            font-size: 1.25rem;
            color: var(--primary);
        }

        .chart-body {
            padding: 1.5rem;
        }

        .chart-container {
            height: 400px;
            width: 100%;
        }

        /* 成绩列表 */
        .score-list {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
        }

        .score-header {
            background: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .score-header i {
            margin-right: 10px;
            font-size: 1.25rem;
            color: var(--primary);
        }

        .score-item {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

        .score-item:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }

        .score-item:last-child {
            border-bottom: none;
        }

        .score-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .student-info h6 {
            margin-bottom: 0.25rem;
            font-weight: 600;
        }

        .student-info small {
            color: #6c757d;
        }

        .score-details {
            text-align: right;
        }

        .score-value {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .score-percentage {
            font-size: 0.875rem;
            color: #6c757d;
        }

        .score-status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .score-status.pass {
            background-color: rgba(76, 175, 80, 0.1);
            color: var(--success);
        }

        .score-status.fail {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--danger);
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .spinner-border {
            color: var(--primary);
        }

        /* 错误提示 */
        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/teacher/home">
                <i class="fas fa-chalkboard-teacher"></i>
                在线考试系统 - 教师端
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/teacher/home">
                    <i class="fas fa-home"></i> 首页
                </a>
                <a class="nav-link active" href="/teacher/score/analysis">
                    <i class="fas fa-chart-line"></i> 成绩分析
                </a>
                <a class="nav-link" href="/exam/manage">
                    <i class="fas fa-file-alt"></i> 考试管理
                </a>
                <a class="nav-link" href="/teacher/question/manage">
                    <i class="fas fa-question-circle"></i> 题库管理
                </a>
                <a class="nav-link" href="/logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-file-alt"></i> 考试详情
            </h1>
            <p class="page-subtitle">查看考试的具体成绩分布和统计信息</p>
        </div>

        <!-- 错误提示 -->
        <div id="errorMessage" class="error-message" style="display: none;"></div>

        <!-- 考试统计 -->
        <div class="row mb-4">
            <div class="col-md-3 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--primary), var(--secondary));">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stats-number" id="totalStudents">0</div>
                    <div class="stats-label">参与学生</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--success), #45a049);">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="stats-number" id="averageScore">0</div>
                    <div class="stats-label">平均分</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--info), #1976d2);">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="stats-number" id="highestScore">0</div>
                    <div class="stats-label">最高分</div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--warning), #f57c00);">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="stats-number" id="passRate">0%</div>
                    <div class="stats-label">及格率</div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <!-- 成绩分布图 -->
            <div class="col-lg-6 mb-4">
                <div class="chart-card">
                    <div class="chart-header">
                        <i class="fas fa-chart-pie"></i>
                        成绩分布
                    </div>
                    <div class="chart-body">
                        <div id="distributionChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <!-- 成绩排名图 -->
            <div class="col-lg-6 mb-4">
                <div class="chart-card">
                    <div class="chart-header">
                        <i class="fas fa-chart-bar"></i>
                        成绩排名
                    </div>
                    <div class="chart-body">
                        <div id="rankingChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成绩列表 -->
        <div class="score-list">
            <div class="score-header">
                <div>
                    <i class="fas fa-list"></i>
                    学生成绩列表
                </div>
                <div>
                    <span class="badge bg-primary" id="scoreCount">0</span>
                </div>
            </div>
            <div id="scoreList">
                <div class="loading">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let distributionChart, rankingChart;
        let examId = null;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL获取考试ID
            const pathParts = window.location.pathname.split('/');
            examId = pathParts[pathParts.length - 1];
            
            initializeCharts();
            loadExamDetail();
        });

        // 初始化图表
        function initializeCharts() {
            // 分布图
            distributionChart = echarts.init(document.getElementById('distributionChart'));
            
            // 排名图
            rankingChart = echarts.init(document.getElementById('rankingChart'));
            
            // 响应式处理
            window.addEventListener('resize', function() {
                distributionChart.resize();
                rankingChart.resize();
            });
        }

        // 加载考试详情
        function loadExamDetail() {
            if (!examId) {
                showError('考试ID无效');
                return;
            }

            fetch(`/teacher/score/api/exam-detail/${examId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        updateExamStatistics(data.data);
                        updateDistributionChart(data.data);
                        updateRankingChart(data.data);
                        updateScoreList(data.data);
                    } else {
                        showError('获取考试详情失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('获取考试详情失败:', error);
                    showError('获取考试详情失败');
                });
        }

        // 更新考试统计
        function updateExamStatistics(scores) {
            if (!scores || scores.length === 0) return;

            const totalStudents = scores.length;
            const totalScore = scores.reduce((sum, score) => sum + score.score, 0);
            const averageScore = totalScore / totalStudents;
            const highestScore = Math.max(...scores.map(s => s.score));
            const passCount = scores.filter(s => s.score >= 60).length;
            const passRate = (passCount / totalStudents) * 100;

            document.getElementById('totalStudents').textContent = totalStudents;
            document.getElementById('averageScore').textContent = averageScore.toFixed(1);
            document.getElementById('highestScore').textContent = highestScore.toFixed(1);
            document.getElementById('passRate').textContent = passRate.toFixed(1) + '%';
        }

        // 更新分布图
        function updateDistributionChart(scores) {
            if (!scores || scores.length === 0) return;

            // 计算成绩分布
            const distribution = {
                '90-100': 0,
                '80-89': 0,
                '70-79': 0,
                '60-69': 0,
                '0-59': 0
            };

            scores.forEach(score => {
                if (score.score >= 90) distribution['90-100']++;
                else if (score.score >= 80) distribution['80-89']++;
                else if (score.score >= 70) distribution['70-79']++;
                else if (score.score >= 60) distribution['60-69']++;
                else distribution['0-59']++;
            });

            const option = {
                title: {
                    text: '成绩分布',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Object.keys(distribution)
                },
                series: [{
                    name: '成绩分布',
                    type: 'pie',
                    radius: '50%',
                    data: Object.entries(distribution).map(([range, count]) => ({
                        value: count,
                        name: range
                    })),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            
            distributionChart.setOption(option);
        }

        // 更新排名图
        function updateRankingChart(scores) {
            if (!scores || scores.length === 0) return;

            // 按成绩排序
            const sortedScores = [...scores].sort((a, b) => b.score - a.score);
            const top10 = sortedScores.slice(0, 10);

            const option = {
                title: {
                    text: '前10名成绩',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const data = params[0];
                        const student = top10[data.dataIndex];
                        return `${student.studentName}<br/>
                                <span style="color: #4361ee;">成绩: ${data.value}</span><br/>
                                <span style="color: #6c757d;">学号: ${student.studentId}</span>`;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: top10.map((_, index) => `第${index + 1}名`),
                    axisLabel: {
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '成绩',
                    min: 0,
                    max: 100
                },
                series: [{
                    name: '成绩',
                    type: 'bar',
                    data: top10.map(s => s.score),
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#4361ee'
                            }, {
                                offset: 1, color: '#3f37c9'
                            }]
                        }
                    }
                }]
            };
            
            rankingChart.setOption(option);
        }

        // 更新成绩列表
        function updateScoreList(scores) {
            const container = document.getElementById('scoreList');
            
            if (!scores || scores.length === 0) {
                container.innerHTML = '<div class="p-3 text-center text-muted">暂无成绩数据</div>';
                return;
            }

            // 按成绩排序
            const sortedScores = [...scores].sort((a, b) => b.score - a.score);

            const html = sortedScores.map((score, index) => {
                const percentage = ((score.score / score.totalScore) * 100).toFixed(1);
                const isPass = score.score >= 60;
                const statusClass = isPass ? 'pass' : 'fail';
                const statusText = isPass ? '及格' : '不及格';
                
                return `
                    <div class="score-item">
                        <div class="score-info">
                            <div class="student-info">
                                <h6>${score.studentName}</h6>
                                <small>${score.studentId}</small>
                                <div class="score-status ${statusClass}">${statusText}</div>
                            </div>
                            <div class="score-details">
                                <div class="score-value">${score.score}/${score.totalScore}</div>
                                <div class="score-percentage">${percentage}%</div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = html;
            document.getElementById('scoreCount').textContent = scores.length;
        }

        // 显示错误信息
        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            
            setTimeout(() => {
                errorDiv.style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html> 